// 网络请求引入
import http from '../../../http/http';
import React, { useEffect, useState } from 'react';
import { View, Text, Switch, Button, Input, Picker } from '@tarojs/components'
import './addAddress.less'
// 输入框
import { AtInput, AtForm, AtList, AtListItem, AtSwitch } from 'taro-ui'
import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/icon.scss";
import Taro, { useDidShow } from '@tarojs/taro'
//选择地址的值
import addressData from './addressData'


const selectorAddress = addressData
function AddAddress() {
    const [address, setAddress] = useState('请选择地址')
    //三级联动
    const [customArray, setCustomArray] = useState(selectorAddress)
    const [customIndex, setCustomIndex] = useState([0, 0, 0])
    let [onlyArray, setOnlyArray] = useState([[], [], []])

    useEffect(() => {
        const data = {
            customArray: customArray,
            customIndex: customIndex,
            onlyArray: onlyArray,
        };
        for (let i = 0; i < data.customArray.length; i++) {
            // @ts-ignore
            data.onlyArray[0].push(customArray[i].name);
        }
        for (let j = 0; j < data.customArray[customIndex[0]].cityList.length; j++) {
            // @ts-ignore
            data.onlyArray[1].push(customArray[customIndex[0]].cityList[j].name);
        }
        for (let k = 0; k < customArray[customIndex[0]].cityList[customIndex[1]].areaList.length; k++) {
            // @ts-ignore
            data.onlyArray[2].push(customArray[customIndex[0]].cityList[customIndex[1]].areaList[k]);
        }
        setCustomArray(data.customArray)
        setCustomIndex(data.customIndex)
        setOnlyArray(data.onlyArray)
    })

    //多列选择
    const bindCustomPickerColumnChange = (e) => {
        const newCustomArray = selectorAddress
        const newCustomIndex = customIndex
        const newOnlyArray = onlyArray

        newCustomIndex[e.detail.column] = e.detail.value;
        const searchColumn = () => {
            for (let i = 0; i < newCustomArray.length; i++) {
                let arr1 = [];
                let arr2 = [];
                if (i == newCustomIndex[0]) {
                    for (let j = 0; j < newCustomArray[i].cityList.length; j++) {
                        // @ts-ignore
                        arr1.push(newCustomArray[i].cityList[j].name);
                        if (j == newCustomIndex[1]) {
                            for (let k = 0; k < newCustomArray[i].cityList[j].areaList.length; k++) {
                                // @ts-ignore
                                arr2.push(newCustomArray[i].cityList[j].areaList[k]);
                            }
                            newOnlyArray[2] = arr2;
                        }
                    }
                    newOnlyArray[1] = arr1;
                }
            };
        }

        switch (e.detail.column) {
            case 0:
                newCustomIndex[1] = 0;
                newCustomIndex[2] = 0;
                searchColumn();
                break;
            case 1:
                newCustomIndex[2] = 0;
                searchColumn();
                break;
        }
    
        //这里要清空原来的数据进行数据更新
        setOnlyArray([[], [], []])
        setCustomIndex(newCustomIndex)
    }

    //选择地区
    const addressOnChange = (e) => {
        const indexArr = e.detail.value;
        const addressText = `${customArray[indexArr[0]].name}${customArray[indexArr[0]].cityList[indexArr[1]].name}${customArray[indexArr[0]].cityList[indexArr[1]].areaList[indexArr[2]]}`
        // console.log(addressText, 6666666666)
        setAddress(addressText)
    }
    // input输入框函数
    //联系人
    const [contacts, setContacts] = useState('');

    const handleChange = (e) => {

        setContacts(e)
    }
    //联系方式
    const [contactslian, setContactslian] = useState('');

    const handleChangetel = (e) => {

        setContactslian(e)

    }
    //详情
    const [contacts3, Contacts3] = useState('');

    function handleChangeyy(e) {

        Contacts3(e)

    }
    // 开关
    const [kaiguan, kaiguanmor] = useState(true);
    const [kaiguanho, setKguanho] = useState(1)
    const switch1Change = (value) => {
        // console.log(value.detail.value)
        if (value.detail.value) { setKguanho(1) } else { setKguanho(0) };

    }
    //    点击确定
    const addaddressqueding = () => {
        http({
            url: '/wangfanghua/x_addaddress',
            method: 'post',
            data: {
                id: 1,
                tel: contactslian,
                order_address: address,
                defaultt: kaiguanho,
                user_name: contacts
            }
        }).then((res) => {
            if (res.code == 200) {
                setContacts('');
                setContactslian('');
                Contacts3('');
                setAddress('请选择地址');
            }
        })
    }

    const W_F_fanhui = () => {
        Taro.navigateTo({
            url: '/pages/mine/myAddress/myAddress'
        })
    }
    return (
        <View className="W_F_box">
            {/* <View>{ggg()}</View> */}
            <View className="W_F_box2">
                <View className="W_F_box3">
                    <View onClick={W_F_fanhui} className='at-icon at-icon-chevron-left W_F_fanhui'></View>
                    <View className="W_F_mywodeshoucang">
                        <Text className="W_F_t1">添加地址</Text>
                    </View>
                </View>
                <View>
                    <AtForm>
                        <AtInput
                            name='contactsuser'
                            type='text'
                            title='联系人：'
                            placeholder='收件人名称'
                            value={contacts}
                            onChange={handleChange}
                        />
                    </AtForm>
                    <AtForm>
                        <AtInput
                            name='contactslian'
                            type='text'
                            title='联系方式：'
                            placeholder='收件人手机号码'
                            value={contactslian}
                            onChange={handleChangetel.bind(this)}
                        />
                    </AtForm>

                    <View id='box' className='information-pages'>
                        {/*选择地址 这里要自己写三级联动*/}
                        <Picker id='box2' mode='multiSelector' range={onlyArray} onChange={addressOnChange} value={customIndex} onColumnChange={bindCustomPickerColumnChange.bind(this)}>
                            <AtList>
                                <AtListItem
                                    className="box3"

                                    title='选择地址'
                                    extraText={address}
                                >
                                </AtListItem>
                            </AtList>
                        </Picker>
                    </View>
                    <AtForm>
                        <AtInput
                            // name={contacts}
                            name='contacts3'
                            type='text'
                            title='详情：'
                            placeholder='输入详情'
                            value={contacts3}
                            onChange={handleChangeyy}
                        />
                    </AtForm>
                    {/* <Input class="weui-input" value={zhi}  maxlength="10" bindinput={bindKeyInput} placeholder="输入同步到view中"/> */}
                    <View class="section section_gap">
                        <View class="body-view">
                            <Switch checked={kaiguan} onChange={switch1Change} />
                            <Text>是否默认</Text>
                        </View>
                    </View>
                </View>

                <View className="W_F_buttontt"><Button id="W_F_button" type='primary' onClick={addaddressqueding}>保存</Button></View>

            </View>
        </View>
    )

}

export default AddAddress;